<template>
	<view>
		<u-image :showLoading="true" :src="'https://pinhongoss.oss-cn-hangzhou.aliyuncs.com/'+ goods.images"
			width="100%" height="400px"></u-image>
		<view class="goods_name"> {{goods.name}}</view>
		<view class="goods_price"> {{goods.price}} ￥</view>
		<view style="height:150px;"></view>
		<view class="bottom">
			<u-button type="warning" @click="showCart"> 加入购物车</u-button>
			<view style="height: 20px;"> </view>
			<u-button type="warning"> 立即购买</u-button>
		</view>
		<u-popup mode="bottom" v-model="show1" border-radius="4" closeable safe-area-inset-bottom>
			<view class="cart-pop">
				<view class="cart_box">
					<view>
						<u-image :src="'https://pinhongoss.oss-cn-hangzhou.aliyuncs.com/'+ goods.images" width="120px"
							height="120px"></u-image>
					</view>
					<view>
						<view class="goods_name_"> {{goods.name}}</view>
						<view class="goods_price_">￥ {{goods.price}}</view>
					</view>
				</view>
				<view class="num">
					<text style="padding-right:40px;"> 购买数量</text>
					<u-number-box v-model="cartNum" :min="1" :max="100" @plus="plus"></u-number-box>
				</view>
				<view class="btn">
					<u-button @click="addCart">确定</u-button>
				</view>
			</view>
		</u-popup>

		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		getGoodsDetail
	} from '@/api/goods.js'
	import {
		addCart
	} from '@/api/cart.js'
	export default {
		data() {
			return {
				goods: {},
				show1: false,
				show2: false,
				cartNum: 1
			}
		},
		onLoad(option) {
			this.goodsId = option.id
			console.log('goods-detail onLoad', option)
			this.getGoodsDetail()
		},
		methods: {
			getGoodsDetail() {
				getGoodsDetail({
					id: this.goodsId
				}).then(res => {
					this.goods = res[0]
					console.log('getGoodsDetail', res)
				})
			},
			showCart() {
				this.show1 = true
			},
			showMessage(msg) {
				this.$refs.uToast.show({
					title: '添加购物车成功',
					type: 'success',
				})
			},
			addCart() {
				addCart({
					goodsId: this.goods.id,
					num: this.cartNum
				}).then(res => {
					this.showMessage()
				})
			},
			plus(value) {
				console.log(value)
				console.log('console.log(value)', this.cartNum)
			}
		}
	}
</script>

<style>
	.goods_name {
		font-size: 30px;
		font-weight: 600;
		padding: 20px;
	}

	.goods_price {
		font-size: 22px;
		font-weight: 600;
		padding: 0 20px;
		color: #ff007f;
	}

	.goods_name_ {
		font-size: 20px;
		font-weight: 600;
		padding: 20px;
	}

	.goods_price_ {
		font-size: 22px;
		font-weight: 600;
		padding: 0 20px;
		color: #ff007f;
	}

	.bottom {
		position: fixed;
		bottom: 10px;
		width: 100%;
	}

	.btn {
		padding: 10px 0 ;
		width: 100%;
	}

	.cart-pop {
		height: 240px;
	}

	.cart_box {
		display: flex;
		flex-wrap: nowrap;
		margin-top: 40px;
	}

	.num {
		margin: 0 40px;
	}
</style>
